<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的Fun桌</title>
    <style type="text/css">
        body,p,a,input{
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        .container{
            width: 100%;
        }
        .main{
            width: 100%;
            height: 500px;

            margin:100px auto;
        }
        .main .cart-container table{
            width: 100%;
        }
        .main .cart-container table tr{
            text-align: center;
        }
        .main .cart-container table tr:hover{
            background: rgba(128, 128, 128, 0.2);
        }
        .main .cart-container table .table-header{
            height: 30px;
            background: #d9d9d9;
            font-size: 16px;
        }
        .main .cart-container table .table-header td:first-child{
            border-left: solid 4px red;
            box-sizing: border-box;
        }
        .main .cart-container table tr td:nth-child(1),
        .main .cart-container table tr td:nth-child(2){
            text-align: left;
        }
        .main .cart-container table tr td:nth-child(2){
            width: 52%;
        }
        .main .cart-container table tr td:nth-child(3){
            width: 12%;
        }
        .main .cart-container table tr td:nth-child(4){
            width: 12%;
        }
        .main .cart-container table tr td:nth-child(5){
            width: 12%;
        }
        .main .cart-container table tr td:last-child{
            width: 10%;
        }
        /*   导航栏背景色  */
        .ul-top {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            height: 52px;
        }
        /*使左边部分在一行*/
        .li-top {
            float: left;
            border-right:1px solid #bbb;
        }
        /*分隔线*/
        /*.li-top:last-child {*/
        /*    border-right: none;*/
        /*}*/
        /*导航栏文字*/
        .li-top a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*光标所指的导航栏链接变色*/
        .li-top a:hover:not(.active) {
            background-color: #111;
        }
        <!--搜索框-->
                /*边框线*/
            #d1{
                width: 100%;
                height: 100px;
                font: 16px Arial;
            }
        /*图标*/
        #logo{
            width: 55px;
            height: 45px;
            position: absolute;
            left: 320px;
            top: 50px;
            background: url("../images/主页/logo.png");
            /*background-position: 3px 0px;*/
            background-size: contain;
        }
        /*搜索栏*/
        .autocomplete {
            /*容器定位设置为 relative:*/
            position: relative;
            display: inline-block;
            position: absolute;
            left: 405px;
            top: 50px;
        }
        input {
            border: 1px solid transparent;
            background-color: #f1f1f1;
            padding: 12px;
            font-size: 16px;
        }
        input[type=text] {
            background-color: #f1f1f1;
            width: 100%;
        }
        /*提交栏*/
        input[type=submit] {
            position: absolute;
            top: 50px;
            left: 733px;
            background-color: DodgerBlue;
            color: #fff;
        }
        .cart-good{
            height: 60px;
        }
        .cart-good img{
            float: left;
            margin: 10px;
            width: 60px;
        }
        .cart-good td p{
            margin: 10px 0px;
        }
        /*加、减按钮*/
        .cart-good td input[type='button']{
            width: 20px;
            height: 42px;
            background: #00f300;
            outline: none;
            border: none;
        }
        .cart-good td input[type='button']:disabled{
            background: grey;
        }
        .cart-good td input[type='button']:first-child{
            margin-right: -4px;
        }
        .cart-good td input[type='button']:last-child{
            margin-left: -4px;
        }
        .cart-good td input[type='text']{
            width: 30px;
            height: 20px;
            outline: none;
            border: none;
            text-align: center;
        }
        .table-footer{
            display: flex;
            justify-content: space-between;
            line-height: 40px;
        }
        .table-footer div{
            font-size: 1.2em;
        }
        .table-footer div button{
            background: red;
            width: 120px;
            height: 40px;
            color: white;
        }
    </style>
</head>
<body  background="../images/菜单/餐厅图/5.jpeg">
<div class="container">
    <header>
        <div>
            <ul class="ul-top">
                <li class="li-top"><a>欢迎光临，约Fun!</a></li>
                <li class="li-top"><a  href="1主页.html">首页</a></li>
                <li class="li-top" style="float:right"><a href="3登录.html">登录</a></li>
                <li class="li-top" style="float:right"><a href="#about">收藏</a></li><li class="li-top" style="float:right">
                <a href="#about">我的Fun桌</a></li>
            </ul>
        </div>
    </header>
    <section class="main">
        <div>
            <!--logo-->
            <div id="logo"></div>
            <!--    搜索框-->
            <div id="search">
                <!-- autocomplete="off" 确保表单已关闭自动填充功能： -->
                <form autocomplete="off" action="/index.php">
                    <div class="autocomplete" style="width:300px;">
                        <input id="myInput" type="text" name="s" placeholder="今天想吃什么">
                    </div>
                    <input type="submit">
                </form>
                <script>
                    var sites = ["西红柿炒鸡蛋","青椒肉丝","糖醋排骨","Wiki","Zhihu","Baidu","Sina","Tmall","JD","Alibaba","QQ","Weixin","R","Rust","Python","Ruby"];

                    function autocomplete(inp, arr) {
                        /*自动填充函数有两个参数，input 输入框元素和自动填充的数组*/
                        var currentFocus;
                        /* 监听 input 输入框，当在 input 输入框元素中时执行以下函数*/
                        inp.addEventListener("input", function(e) {
                            var a, b, i, val = this.value;
                            /*关闭已打开的自动填充列表*/
                            closeAllLists();
                            if (!val) { return false;}
                            currentFocus = -1;
                            /*创建 DIV 元素用于放置自动填充列表的值*/
                            a = document.createElement("DIV");
                            a.setAttribute("id", this.id + "autocomplete-list");
                            a.setAttribute("class", "autocomplete-items");
                            /*DIV 作为自动填充容器的子元素*/
                            this.parentNode.appendChild(a);
                            /*循环数组*/
                            for (i = 0; i < arr.length; i++) {
                                /*检查填充项是否有与文本字段值相同的内容，不区分大小写*/
                                if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
                                    /*为每个匹配元素创建一个 DIV 元素 */
                                    b = document.createElement("DIV");
                                    /*匹配项加粗*/
                                    b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
                                    b.innerHTML += arr[i].substr(val.length);
                                    /*选中的填充项插入到隐藏 input 输入字段，用于保存当前选中值*/
                                    b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
                                    /*当有人点击填充项（DIV 元素）时执行函数*/
                                    b.addEventListener("click", function(e) {
                                        /*选中的填充项插入到隐藏 input 搜索字段*/
                                        inp.value = this.getElementsByTagName("input")[0].value;
                                        /*关闭自动填充列表*/
                                        closeAllLists();
                                    });
                                    a.appendChild(b);
                                }
                            }
                        });
                        /*按下键盘上的一个键时执行函数*/
                        inp.addEventListener("keydown", function(e) {
                            var x = document.getElementById(this.id + "autocomplete-list");
                            if (x) x = x.getElementsByTagName("div");
                            if (e.keyCode == 40) {
                                /*如果按下箭头向下键，currentFocus 变量加 1，即向下移动一位*/
                                currentFocus++;
                                /*使当前选中项更醒目*/
                                addActive(x);
                            } else if (e.keyCode == 38) { //up
                                /*按下箭头向上键，选中列表项向上移动一位*/
                                currentFocus--;
                                /*使当前选中项更醒目*/
                                addActive(x);
                            } else if (e.keyCode == 13) {
                                /*如果按下 ENTER 键，阻止提交，你也可以设置 submit 提交*/
                                e.preventDefault();
                                if (currentFocus > -1) {
                                    /*模拟点击选中项*/
                                    if (x) x[currentFocus].click();
                                }
                            }
                        });
                        function addActive(x) {
                            /*设置选中的选项函数*/
                            if (!x) return false;
                            /*移动选项设置不同选中选项的背景颜色*/
                            removeActive(x);
                            if (currentFocus >= x.length) currentFocus = 0;
                            if (currentFocus < 0) currentFocus = (x.length - 1);
                            /*添加 "autocomplete-active" 类*/
                            x[currentFocus].classList.add("autocomplete-active");
                        }
                        function removeActive(x) {
                            /*移除没有选中选项的 "autocomplete-active" 类*/
                            for (var i = 0; i < x.length; i++) {
                                x[i].classList.remove("autocomplete-active");
                            }
                        }
                        function closeAllLists(elmnt) {
                            /*关闭自动添加列表*/
                            var x = document.getElementsByClassName("autocomplete-items");
                            for (var i = 0; i < x.length; i++) {
                                if (elmnt != x[i] && elmnt != inp) {
                                    x[i].parentNode.removeChild(x[i]);
                                }
                            }
                        }
                        /*点击 HTML 文档任意位置关闭填充列表*/
                        document.addEventListener("click", function (e) {
                            closeAllLists(e.target);
                        });
                    }

                    autocomplete(document.getElementById("myInput"), sites);
                </script>
            </div>
        </div>
        <div class="cart-container">
            <table cellspacing="0">
                <tr class="table-header">
                    <td><input type="checkbox" id="chk_alla"></td>
                    <td>我的Fun桌</td>
                    <td>菜名</td>
                    <td>聚美价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </table>
            <div class="table-footer">
                <div>
                    <input type="checkbox" id="chk_allb"> <label for="chk_allb">全选</label>
                    <span style="margin-left: 20px">继续点餐 | 清空选中菜品</span>
                </div>
                <div>
                    共 <span id="good_count">5</span>件菜    菜品应付总额：<span id="goods_total">¥229.00</span>
                    <button class="btn_menu">去结算</button>
                </div>
            </div>
        </div>
    </section>
</div>
<script>
    (function () {
        var skin_products= [
            {
                "id":"002",
                "title": "丝娃娃",
                "img_url": "../images/菜单/主食小吃/丝娃娃.jpg",
                "name": "丝娃娃",
                "price": 30,
                "number":2,
                "acount": "520",
                "ischecked":true
            },
            {
                "id":"004",
                "title": "蒸饺",
                "img_url": "../images/菜单/主食小吃/炒饭.jpg",
                "name": "蒸饺",
                "price": 15,
                "number":1,
                "acount": "5911",
                "ischecked":false
            },
            {
                "id":"008",
                "title": "糯猪脚",
                "img_url": "../images/菜单/荤菜/糯猪脚.jpg",
                "name": "糯猪脚",
                "price": 60,
                "number":1,
                "acount": "3972",
                "ischecked":true
            },
            {
                "id":"0012",
                "title": "鸡公煲" ,
                "img_url": "../images/菜单/荤菜/鸡公煲.jpg",
                "name": "鸡公煲",
                "price": 150,
                "number":1,
                "acount": "2338"
            },
            {
                "id":"001",
                "title": "可乐鸡翅",
                "img_url": "../images/菜单/荤菜/可乐鸡翅.jpg",
                "name": "可乐鸡翅",
                "price": 50,
                "number":2,
                "acount": "5071",
                "ischecked":false
            },
            {
                "id":"009",
                "title": "回锅肉",
                "img_url": "../images/菜单/荤菜/回锅肉.jpg",
                "name": "回锅肉",
                "price": 50,
                "number":1,
                "acount": "4022",
                "ischecked":false
            }
        ]
//    添加商品
        function load() {
            var tbody=document.querySelector('.cart-container table tbody');
            for(let good of skin_products){
                tbody.innerHTML+=` <tr class="cart-good" id="${good.id}">
                            <td><input type="checkbox" class="good-check" ${good.ischecked?"checked":''}></td>
                            <td>

                                <img src="${good.img_url}" alt="">
                                <p>美食</p>
                            </td>
                            <td>${good.name}</td>
                            <td>${good.price}</td>
                            <td>
                                <input type="button" value="-"  ${good.number<=1?"disabled":''}>
                                <input type="text" value="${good.number}">
                                <input type="button" value="+">
                            </td>
                            <td>${good.price*good.number}</td>
                            <td><a href="#">删除</a></td>
                        </tr>`
            }
            totalAcount();
        }
        load();
//    end all..........
        // 1. 为table注册单击事件
        var table01=document.querySelector('.cart-container table');
        table01.onclick=function (event) {
            var node=event.target
            if(node.getAttribute('type')=='button'){
                // alert(event.target.value);
                changeNumber(event);
                subtotal(event);
                checkedRow(event);
                checkedAllRows();

            }else if(node.className=='good-check'){
                checkedAllRows();
            }else if(node.id=='chk_alla'){
                var f=event.target.checked;
                var chks=document.querySelectorAll('.good-check');
                for(var ck of chks){
                    ck.checked=f;
                }
                for(var good of skin_products){
                    good.ischecked=f;
                }
            }else if(node.nodeName.toLowerCase()=='a'){
                var tr=event.target.parentNode.parentNode;
                for(var i=0;i<skin_products.length;i++){
                    if(skin_products[i].id==tr.id){
                        skin_products.splice(i,1);
                        console.log(skin_products);
                    }
                }

                tr.parentNode.removeChild(tr);

            }
            totalAcount();
        };
        //单击增加或减少按钮的方法
        function changeNumber(event) {

            var node=event && event.target;
            var v=0;
            if(node.value && node.value=='+'){
                // node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
                node.previousElementSibling.value++;
                v=node.previousElementSibling.value;
                node.previousElementSibling.previousElementSibling.disabled=false;

            }else{
                // if(node.value && node.value=='+')
                if(node.nextElementSibling.value>1){
                    node.nextElementSibling.value--;
                    v=node.nextElementSibling.value;
                    if(v==1){
                        node.disabled=true;
                    }
                }
            }
            //    存储商品数量
            var id=node.parentNode.parentNode.id;

            for(var good of skin_products){
                if(id==good.id){
                    good.number=v;
                }
            }

        }
//    每个商品小计的方法
        function subtotal(event) {
            var node=event && event.target;

            // var id=node.parentNode.parentNode.id;

            // for(var g of skin_products){
            //     if(g.id==id){
            //         alert(g.price);
            //     }
            // }
            // var price=；
            var price=node.parentNode.previousElementSibling.innerText;
            var num=node.parentNode.children[1].value;
            node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
        }
//    检验该商品是否选中
        function checkedRow(event) {
            event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
            // event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;
            // var tbody=event.target.parentNode.parentNode.parentNode;
            // event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;
        }
//   检查是否全选
        function checkedAllRows() {
            var chks=document.querySelectorAll('.good-check');
            var flag=true;
            for(var ck of chks){
                if(!ck.checked){
                    flag=false;
                    break;
                }
            }
            document.querySelector('#chk_alla').checked=flag;

        }
//    统计商品总量和总价格
        function totalAcount() {

            var total=0;
            var total_price=0;
            var chks=document.querySelectorAll('.good-check');
            for(var ck of chks){
                if(ck.checked){
                    id=ck.parentNode.parentNode.id;
                    for(var good of skin_products){
                        if(id==good.id){
                            total+=~~good.number;
                            total_price=total_price+(good.number*good.price);
                            good.ischecked=true;
                        }
                    }
                }
            }
            document.querySelector('#good_count').innerText=total;
            document.querySelector('#goods_total').innerText=total_price;
        }
    })();
</script>
</body>
</html>